<template>
  <div>
    <div style="color: #101010; font-weight: 600">公告及图文链接配置</div>
    <div style="margin-bottom: 15px; display: flex; justify-content: flex-end">
      <div style="margin-right: 15px">
        <el-button type="primary" @click="editExchangeGoodsY()"
          >编辑入会优惠券</el-button
        >
      </div>
      <div style="margin-right: 15px">
        <el-button type="primary" @click="editExchangeGoods()"
          >编辑公告</el-button
        >
      </div>
      <div>
        <el-button type="primary" @click="addExchangeGoods()"
          >创建为你推荐</el-button
        >
      </div>
    </div>
    <div>
      <el-table :data="addGoodsList" border style="width: 100%">
              <el-table-column
           label="ID"
      type="index"
      >
    </el-table-column>
        <el-table-column prop="order" label="排序" width="70"  align="center">
        </el-table-column> 
          <el-table-column
            prop="extensionParams.recommendList[0].itemId"
            label="名称一"
            width="180"
             align="center"
          >
          </el-table-column>
          <el-table-column
            prop="extensionParams.recommendList[1].itemId"
            label="名称二"
            width="180"
             align="center"
          >
          </el-table-column>
        <el-table-column prop="type" label="展示类型" width="180"  align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 1">长图链接</span>
            <span v-else-if="scope.row.type == 2">短图链接</span>
            <span v-else-if="scope.row.type == 3">图文链接</span>
          </template>
        </el-table-column>
        <el-table-column prop="editTime" label="更新日期"  align="center">
        </el-table-column>
        <el-table-column label="操作" width="331"  align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="editAddGoods(scope.row)"
              >编辑</el-button
            >
            
            <el-button @click="deleteGoods(scope.row)" type="danger" size="mini"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="margin-top: 30px">
        <!-- <el-pagination
          mini
          layout="prev, pager, next, jumper"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="totalPage"
          @current-change="handleCurrentChange"
        >
        </el-pagination> -->
      </div>
    </div>
    <configureAdd
      v-if="addOrEdit == 1"
      :addOrEdit="addOrEdit"
      @getAddGoodsList="getAddGoodsList"
    >
    </configureAdd>
    <configureEdit
      v-if="addOrEdit == 2"
      :addOrEdit="addOrEdit"
      :editGoodsCont="editGoodsCont"
      @getAddGoodsList="getAddGoodsList"
    >
    </configureEdit>
    <configureEditT
      v-if="addOrEdit == 3"
      :addOrEdit="addOrEdit"
      :editGoodsCont2="editGoodsCont2"
      @getAddGoodsList="getAddGoodsList"
    >
    </configureEditT>
    <configureEditY
      v-if="addOrEdit == 4"
      :addOrEdit="addOrEdit"
      :editGoodsCont3="editGoodsCont3"
      @getAddGoodsList="getAddGoodsList"
    >
    </configureEditY>
  </div>
</template>
<script>
import configureEdit from "./configureEdit.vue";
import configureEditT from "./configureEditT.vue";
import configureEditY from "./configureEditY.vue";
import configureAdd from "./configureAdd";
import requestAxios from "../../../http";
export default {
  name: "configurePage",
  components: {
    configureEdit,
    configureAdd,
    configureEditT,
    configureEditY,
  },
  data() {
    return {
      addGoodsList: [],
      addOrEdit: false, //添加新的商品还是编辑
    };
  },
  created(){
    let token = sessionStorage.getItem("authorization");
    console.log(token,"22222222222222222");
  },
  mounted() {
    this.getAddGoodsList();
  },
  computed: {},
  methods: {
    //添加新的兑换商品
    addExchangeGoods() {
      this.addOrEdit = 1;
    },
    // 编辑入会优惠券
    editExchangeGoodsY() {
      requestAxios
        .fetchGet("/api/v2.1/task/config/management/coupons/detail", {
          headers: {},
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("优惠券", data.data.data);
            this.addOrEdit = 4;
            this.editGoodsCont3 = data.data.data;
            console.log(this.editGoodsCont3, "父组件11111");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 更新公告
    editExchangeGoods() {
      let that=this;
      let obj = null;
      obj = {
        id: 1,
      };
      requestAxios
        .fetchGet("/api/v2.2/interactionDefination/get", obj, {
           headers: { token: that.token},
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("公告配置查询111111111", data.data);
            this.addOrEdit = 3;
            this.editGoodsCont2 = data.data.data;

            console.log(this.editGoodsCont2, "111111234");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //编辑加购商品
    editAddGoods(item) {
      this.addOrEdit = 2;
      this.editGoodsCont = JSON.parse(JSON.stringify(item));
    },
    //公告配置查询
    getAddGoodsList() {
      requestAxios
        .fetchGet("/api/v2.1/recommendConfig/getRecommendConfigList", {
          headers: {},
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("公告配置查询", data.data.data);
          
            this.addGoodsList = data.data.data;
            let addGoodsList = data.data.data;
            for (let item of addGoodsList) {
              this.addGoodsList.ext = item.extensionParams.recommendList;
              console.log(this.addGoodsList.ext.length, "sss");
            }

            this.addGoodsList1 = data.data.data;
            console.log(this.addGoodsList, "1111111111111");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //改变当前页数
    handleCurrentChange(value) {
      console.log("改变当前页数", value);
      this.page = value;
      this.getAddGoodsList();
    },

    // 删除加购商品
    deleteGoods(item) {
      console.log("删除某个兑换商品", item);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteConfirm(item.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteConfirm(id) {
      console.log(id, "删除接口");
      requestAxios
        .fetchGet("/api/v2.1/recommendConfig/delete/?id=" + id, {
          headers: {},
        })
        .then((data) => {
          if (data.status == 200 && data.data.success) {
            console.log("删除兑换商品", data.data);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getAddGoodsList();
          } else {
            console.log("删除加购商品", data.data);
            this.tip(false, data.data.errorMsg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //提示的通用方法
    tip(state, text) {
      if (state) {
        this.$message({
          showClose: true,
          message: text,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: text,
          type: "error",
        });
      }
    },
  },
};
</script>